<template>
    <div ref="container" class="container">{{ containerDiv }}</div>
    <input type="text" ref="username"/>
    <button @click="getElementHandl">获取元素</button>

</template>
<script>

/**
 * 内容改变：{{ 模板语法 }}
 * 属性改变：v-bind:属性名="数据"
 * 事件改变：v-on:事件名="事件处理函数"
 * 双向绑定：v-model:属性名="数据"
 * 条件渲染：v-if="条件"
 * 列表渲染：v-for="(item, index) in 数组"
 * 事件修饰符：.stop .prevent .capture .self .once
 * 按键修饰符：.enter .tab .delete .esc .space .up .down .left .right
 * 鼠标按钮修饰符：.left .right .middle
 * 
 */
export default {
    data() {
        return {
            containerDiv: "容器",
        }
    },
    methods: {
        getElementHandl() {
            console.log(this.$refs.container);
            this.$refs.container.innerHTML = "新的内容";//innerHTML原生JS的属性

            console.log(this.$refs.username.value);
        }
    },
    
}

</script>
<style type="text/css"></style>